<style lang="less"scoped="scoped">
	p{
		height: .4rem;
		line-height: .4rem;
		padding-left: .2rem;
		border-bottom: .01rem solid white;
		font-size: .14rem;
		
		
	}
	.package{
			width: 100%;
			padding: 0 .15rem;
			box-sizing: border-box;
			border-bottom: .01rem solid gray;
			background: #FFFFFF;
			.name{
				height: .3rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	.address{
		width: 3.3rem;
		margin-top: .03rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: .12rem;
		color: gray;
	}	
	
	.geocode{
		margin-top: .1rem;
		margin-bottom: .1rem;
		font-size: .12rem;
		color: gray;
	}
	span{
		.van-icon{
			font-size: .12rem;
		}
	}
</style>


<template>
	<div id="">
		<section v-for="(v,k,index) in obj" :key="index">
			<p @click="toggle(k)">{{k}}</p>
			<ul v-show="arr.indexOf(k)>=0">
				<li v-for="item in v" :key="item.id" @click="detail(item.id)">
					<div class="package">
						<div class="name">
							<span>{{item.name}}</span>
							<span><van-icon name="arrow" /></span>
							
						</div>
						<div class="address">{{item.address}}</div>
						<div class="geocode">距离未知</div>
					</div>
					
					
				</li>
			</ul>
		</section>
	</div>
</template>
		
			
			

<script>
	import { ajax } from '@/utils'
	import { Icon } from 'vant';
	export default{
		
		data(){
			return{
				obj: {},
				arr: []
			}
		},
		
		created(){
			this.getCinemaList();
			this.$store.commit('updateTitle','卖座电影');
		},
		components:{
			[Icon.name]: Icon
		},
		
		methods:{
			getCinemaList(){
				const url = '/v4/api/cinema';
				const data = {};
				ajax(url,data,(res)=>{
					this.obj = this.dataDeal(res.cinemas)
					
				})
			},
			
			//一个单独处理请求回来数据的函数
			dataDeal(list){
				let set = new Set();
				for(let item of list){
					set.add(item.district.name);

				}
				
				let obj = {};
				for (let i of set) {
					obj[i] = list.filter((item) =>{
//						console.log(i);
						return item.district.name === i;
					})
				}
				return obj;
			},
			
			toggle(k){ 	
				if(this.arr.indexOf(k)>=0){
					console.log(this.arr.indexOf(k))
					this.arr.splice(this.arr.indexOf(k),1);
				}else{
					this.arr.push(k)
				}

			},
			
			detail(id){
				console.log('id是',id)
				this.$router.push({path: 'CinemaDetail',query: {id}})
			}
		}
	}
	
</script>

					
